<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-chart :options="options" style="width: 100%; height: 500px" />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script setup lang="ts">
import { ref } from "vue"
const options = ref({
  title: {
    text: "Basic Radar Chart"
  },
  legend: {
    data: ["Allocated Budget", "Actual Spending"]
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: "Sales" },
      { name: "Administration" },
      { name: "Information Technology" },
      { name: "Customer Support" },
      { name: "Development" },
      { name: "Marketing" }
    ]
  },
  series: [
    {
      name: "Budget vs spending",
      type: "radar",
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: "Allocated Budget"
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: "Actual Spending"
        }
      ]
    }
  ]
})
</script>
